<!-- 用户信息的显示与修改 -->
<template>
	<div v-if="dataInfo.modelOptions" :style="[widthStyle]">
		<div v-if="editKey" style="min-height: 300px;display: flex;flex-direction: column;justify-content: space-between;">
			<uni-forms ref="form" v-model="dataInfo.modelValue" :rules="dataInfo.modelRules">
				<block v-for="(array, idx) in dataInfo.modelOptions" :key="idx">
					<uni-forms-item v-for="(record, index) in array" v-if="record.key === editKey || record.editKey === editKey" :key="index" :label="record.title" :name="record.key" :required="record.required">
						<CaDbComponent v-if="editKey" v-model="dataInfo.modelValue[record.key]" :record="record" :dataInfo="dataInfo.modelValue"/>
					</uni-forms-item>
				</block>
			</uni-forms>
			<div style="margin: 20px 0;">
				<CaButton title="返回" isPureText @click="e => editKey = ''"></CaButton>
				<CaButton title="提交" type="primary" @click="onSubmit"/>
			</div>
		</div>
		<div v-else>
			<uni-section v-for="(array, idx) in dataInfo.modelOptions" :key="idx" title="">
				<div v-for="(record, index) in array" v-if="!record.editKey" :key="index" class="space-between" style="height: 56px;">
					<CaLabel :text="record.title" style="width: 60px;"/>
					<div style="display: flex;align-items: center;justify-content: flex-end;border-bottom: 1px solid #E9E9E9;flex: 1;height: 90%;" @click="editKey = record.key">
						<CaImage v-if="record.typeDetail === 'image'" :src="dataInfo.modelValue[record.key]" size="44" showBig/>
						<div v-else-if="record.typeDetail === 'password'">********</div>
						<CaLabel v-else :text="dataInfo.modelValue[record.key]" size="16"/>
					</div>
				</div>
			</uni-section>
			<div style="margin: 50px 0 20px;">
				<CaButton v-if="logout" title="退出登录" type="warn" @click="$emit('logout', onClose)"/>
				<CaButton v-else title="确定" type="primary" @click="onClose"/>
			</div>
		</div>
	</div>
	<LoadView v-else loading="loading"/>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	/**
	 * 要查询服务器允许哪些用户信息的显示与修改
	 * 用户信息修改，只能单项修改，不做多项一起需改
	 */
	export default {
		extends: base,
		emits: ['error', 'close', 'logout'],
		props: {
			/**
			 * 场景，用于区分是哪个页面调用
			 * site：站点
			 * app：app应用
			 */
			sence: {
				type: String,
				default: 'site'
			}, 
			doc: String, // 用户id，默认是当前用户
			edit: String, // 默认显示修改的哪一项
			logout: Boolean, // 是否显示退出登录按钮
			widthStyle: { // 默认最大值mainWidth，页面宽度小于mainWidth，则使用页面宽度
				type: Object,
				default: function() {
					return {
						// width、minWidth存咋，表示有值传过来
					}
				}
			},
		},
		data() {
			return {
				mainWidth: 400, // 默认最大宽度
				editKey: this.edit, // 具体修改哪一项
				dataInfo: {
					modelOptions: undefined,
					modelValue: {},
					modelRules: {},
				}
			}
		},
		mounted() {
			const {sence, doc, widthStyle} = this
			if (widthStyle.width || widthStyle.minWidth || widthStyle['min-width']) {
				// 有设定的宽度
			} else {
				if (this.deviceInfo.windowWidth < this.mainWidth) {
					this.mainWidth = this.deviceInfo.windowWidth
				}
				widthStyle.maxWidth = `${this.mainWidth}px`
				widthStyle.minWidth = `${this.mainWidth - 40}px`
			}
			this.request('initial', 'showUserInfo', {sence, doc}, true).then(res => {
				this.dataInfo = res.data
			}).catch(err => {
				this.$emit('error', err)
			})
		},
		methods: {
			onClose() {
				this.$emit('close')
			},
			
			// 提交完之后返回
			onSubmit() {
				const {sence, doc, widthStyle, editKey} = this
				this.$refs.form.validate().then(data => {
					const {modelValue, passtype} = this.dataInfo
					var action, success, fail
					if (editKey === 'phone') { // 加上验证码参数
						data.uuid = modelValue.uuid
						action = () => {
							modelValue.uuid = ''
							modelValue.code = ''
						}
					} else if (editKey === 'password') { // 对密码进行加密
						if (data.new_1 && data.new_1 === data.new_2) {
							Object.keys(data).forEach(key => {
								data[key] = this.core.synctool.secret.setPassword(data[key], passtype)
							})
							data.passtype = passtype
							success = () => {
								modelValue.password = ''
								modelValue.new_1 = ''
								modelValue.new_2 = ''
							}
						} else {
							return this.core.showToast('两次密码不一致')
						}
					}
					this.request('initial', 'updateUserInfo', {data, sence, doc}, true).then(res => {
						this.editKey = ''
						action && action()
						success && success()
					}).catch(err => {
						action && action()
						fail && fail()
					})
				})
			}
		}
	}
</script>

<style>
</style>